<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业批改 - 墨语智学</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2962FF',
                        secondary: '#1A237E',
                        success: '#4CAF50',
                        error: '#F44336',
                        warning: '#FF9800'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    },
                    fontFamily: {
                        'sans': ['Poppins', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
            font-family: 'Poppins', sans-serif;
            background-color: #F5F7FF;
        }
        .glass-effect {
            backdrop-filter: blur(8px);
            background-color: rgba(255, 255, 255, 0.95);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(41, 98, 255, 0.1);
        }
        .dropdown-enter {
            opacity: 0;
            transform: translateY(-10px);
        }
        .dropdown-enter-active {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.2s ease;
        }
        .dropdown-exit {
            opacity: 1;
            transform: translateY(0);
        }
        .dropdown-exit-active {
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.2s ease;
        }
        .highlight-error {
            background-color: rgba(244, 67, 54, 0.1);
            border-bottom: 2px dashed #F44336;
            cursor: pointer;
        }
        .highlight-suggestion {
            background-color: rgba(255, 152, 0, 0.1);
            border-bottom: 2px dashed #FF9800;
            cursor: pointer;
        }
        .highlight-excellent {
            background-color: rgba(76, 175, 80, 0.1);
            border-bottom: 2px dashed #4CAF50;
            cursor: pointer;
        }
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .sidebar-item {
            transition: all 0.2s ease;
        }
        .sidebar-item:hover {
            background-color: rgba(41, 98, 255, 0.1);
        }
        .sidebar-item.active {
            background-color: rgba(41, 98, 255, 0.2);
            border-left: 3px solid #2962FF;
        }
        .progress-ring {
            transform: rotate(-90deg);
        }
    </style>
</head>
<body>
    <!-- 导航栏 (与首页一致) -->
    <nav class="flex items-center justify-between px-6 lg:px-12 h-16 bg-white/90 backdrop-blur-md fixed top-0 left-0 right-0 z-50 border-b border-blue-50">
        <div class="flex items-center gap-8 lg:gap-16">
            <a href="墨语智学首页.html" class="flex items-center gap-3">
                <span class="text-primary text-2xl font-bold tracking-tight">墨语智学</span>
            </a>
            <div class="hidden lg:flex items-center gap-8">
                <a href="墨语智学计划.html" class="text-gray-700 hover:text-primary transition-colors font-medium">备考规划</a>
                <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">在线教学</a>
                <a href="墨语智学真题.html" class="text-gray-700 hover:text-primary transition-colors font-medium">真题练习</a>
                <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">学习社区</a>
            </div>
        </div>
        
        <!-- 动态登录/用户区域 -->
        <div class="flex items-center gap-4 lg:gap-6" id="auth-section">
            <div id="login-btn-container">
                <a href="墨语智学登录.html" class="flex items-center px-4 lg:px-6 py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors">
                    <span class="whitespace-nowrap font-medium text-sm lg:text-base">登录</span>
                </a>
            </div>
            <a href="墨语智学聊天.html" class="flex items-center px-4 lg:px-6 py-2 bg-primary text-white rounded-button hover:bg-secondary transition-colors">
                <span class="whitespace-nowrap font-medium text-sm lg:text-base">免费试用</span>
            </a>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="pt-24 pb-16 max-w-[1440px] mx-auto px-6">
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- 左侧批改面板 -->
            <div class="lg:w-1/4 bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-semibold text-secondary mb-6">AI 批改面板</h2>
                
                <!-- 批改统计 -->
                <div class="mb-8">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-secondary">批改统计</h3>
                        <div class="flex items-center gap-2">
                            <span class="text-sm text-gray-500">总分</span>
                            <span class="text-lg font-bold text-primary">85/100</span>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-secondary">语法准确性</span>
                                <span class="text-sm font-bold text-primary">22/25</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 88%"></div>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-secondary">词汇丰富度</span>
                                <span class="text-sm font-bold text-primary">18/20</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 90%"></div>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-secondary">结构连贯性</span>
                                <span class="text-sm font-bold text-primary">20/25</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 80%"></div>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-secondary">内容完整性</span>
                                <span class="text-sm font-bold text-primary">25/30</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 83%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 问题分类 -->
                <div class="mb-8">
                    <h3 class="text-lg font-medium text-secondary mb-4">问题分类</h3>
                    
                    <div class="space-y-3">
                        <div class="sidebar-item active p-3 rounded-lg cursor-pointer">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <span class="w-5 h-5 rounded-full bg-error text-white flex items-center justify-center text-xs">3</span>
                                    <span class="text-sm font-medium">语法错误</span>
                                </div>
                                <i class="fas fa-chevron-right text-xs text-gray-500"></i>
                            </div>
                        </div>
                        
                        <div class="sidebar-item p-3 rounded-lg cursor-pointer">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <span class="w-5 h-5 rounded-full bg-warning text-white flex items-center justify-center text-xs">5</span>
                                    <span class="text-sm font-medium">表达建议</span>
                                </div>
                                <i class="fas fa-chevron-right text-xs text-gray-500"></i>
                            </div>
                        </div>
                        
                        <div class="sidebar-item p-3 rounded-lg cursor-pointer">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <span class="w-5 h-5 rounded-full bg-success text-white flex items-center justify-center text-xs">8</span>
                                    <span class="text-sm font-medium">优秀表达</span>
                                </div>
                                <i class="fas fa-chevron-right text-xs text-gray-500"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 批改建议 -->
                <div>
                    <h3 class="text-lg font-medium text-secondary mb-4">总体建议</h3>
                    
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <p class="text-sm text-gray-700 mb-3">1. 文章结构清晰，但部分段落之间的过渡可以更自然。</p>
                        <p class="text-sm text-gray-700 mb-3">2. 词汇使用较为丰富，但个别词汇选择不够准确。</p>
                        <p class="text-sm text-gray-700">3. 语法基本正确，但需要注意时态一致性问题。</p>
                    </div>
                    
                    <button class="w-full mt-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-button hover:opacity-90 transition-colors flex items-center justify-center gap-2">
                        <i class="fas fa-download"></i>
                        <span>下载批改报告</span>
                    </button>
                </div>
            </div>
            
            <!-- 右侧作业内容 -->
            <div class="lg:w-3/4 bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h2 class="text-xl font-semibold text-secondary mb-1">英语写作作业批改</h2>
                        <p class="text-sm text-gray-500">提交时间: 2023-11-15 14:30 | 字数: 256</p>
                    </div>
                    <div class="flex gap-3">
                        <button class="px-4 py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors flex items-center gap-2">
                            <i class="fas fa-history"></i>
                            <span>历史版本</span>
                        </button>
                        <button class="px-4 py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors flex items-center gap-2">
                            <i class="fas fa-redo"></i>
                            <span>重新批改</span>
                        </button>
                    </div>
                </div>
                
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="text-lg font-medium text-secondary mb-4">题目要求</h3>
                    <div class="bg-blue-50 p-4 rounded-lg mb-6">
                        <p class="text-gray-700">请以"My Ideal Career"为题，写一篇不少于200词的英语短文，描述你理想中的职业，包括职业特点、选择原因以及未来规划等内容。</p>
                    </div>
                    
                    <h3 class="text-lg font-medium text-secondary mb-4">学生作业</h3>
                    <div class="prose max-w-none border border-gray-200 rounded-lg p-6">
                        <h4 class="text-lg font-medium text-secondary mb-2">My Ideal Career</h4>
                        
                        <p class="text-gray-700 leading-relaxed mb-4">
                            My ideal job is to become a <span class="highlight-error tooltip">software engineer<span class="tooltiptext">建议改为: software developer (更常用)</span></span>. I am passionate about programming and problem-solving. In the future, I want to work for a leading technology company where I can contribute to innovative projects. <span class="highlight-excellent tooltip">This career path aligns perfectly with my skills and interests<span class="tooltiptext">优秀表达: 句式丰富，表达清晰</span></span>.
                        </p>
                        
                        <p class="text-gray-700 leading-relaxed mb-4">
                            I believe this career will allow me to continuously learn and grow. Technology is always evolving, and there are always new challenges to tackle. <span class="highlight-error tooltip">I enjoy work in team environments<span class="tooltiptext">语法错误: work → working (动名词作宾语)</span></span> and collaborating with others to create solutions. <span class="highlight-suggestion tooltip">Working in a team can help me learn from others<span class="tooltiptext">建议: 可以补充具体的学习内容，如"learn new techniques and approaches"</span></span>.
                        </p>
                        
                        <p class="text-gray-700 leading-relaxed mb-4">
                            Additionally, being a software engineer offers good career prospects and opportunities for advancement. Many companies are looking for skilled developers, and the demand continues to grow. <span class="highlight-error tooltip">According to statistics, the employment of software developers is projected to grow 22 percent from 2020 to 2030, much faster than the average for all occupations<span class="tooltiptext">引用需要注明具体来源</span></span>.
                        </p>
                        
                        <p class="text-gray-700 leading-relaxed">
                            <span class="highlight-excellent tooltip">To prepare for this career, I am currently majoring in computer science and participating in various coding competitions<span class="tooltiptext">优秀表达: 具体说明了准备措施</span></span>. <span class="highlight-suggestion tooltip">I also plan to do internships to gain practical experience<span class="tooltiptext">建议: 可以补充具体的实习目标，如"in renowned tech companies"</span></span>. My ultimate goal is to become a senior developer and lead my own team in creating impactful software products.
                        </p>
                    </div>
                    
                    <!-- 批改详情 -->
                    <div class="mt-8">
                        <h3 class="text-lg font-medium text-secondary mb-4">批改详情</h3>
                        
                        <div class="space-y-4">
                            <!-- 语法错误 -->
                            <div class="border-l-4 border-error pl-4 py-2">
                                <div class="flex items-center gap-3 mb-2">
                                    <span class="w-6 h-6 rounded-full bg-error text-white flex items-center justify-center text-xs">
                                        <i class="fas fa-times"></i>
                                    </span>
                                    <span class="font-medium text-secondary">语法错误 (3处)</span>
                                </div>
                                <div class="bg-red-50 p-3 rounded-lg">
                                    <p class="text-sm text-gray-700 mb-1">1. "work in team environments" → "working in team environments" (动名词作宾语)</p>
                                    <p class="text-sm text-gray-700 mb-1">2. "According to statistics..." 需要注明具体数据来源</p>
                                    <p class="text-sm text-gray-700">3. "software engineer" 在此上下文中建议使用更通用的 "software developer"</p>
                                </div>
                            </div>
                            
                            <!-- 表达建议 -->
                            <div class="border-l-4 border-warning pl-4 py-2">
                                <div class="flex items-center gap-3 mb-2">
                                    <span class="w-6 h-6 rounded-full bg-warning text-white flex items-center justify-center text-xs">
                                        <i class="fas fa-lightbulb"></i>
                                    </span>
                                    <span class="font-medium text-secondary">表达建议 (5处)</span>
                                </div>
                                <div class="bg-yellow-50 p-3 rounded-lg">
                                    <p class="text-sm text-gray-700 mb-1">1. "Working in a team can help me learn from others" 可以补充具体的学习内容</p>
                                    <p class="text-sm text-gray-700 mb-1">2. "I also plan to do internships" 可以补充具体的实习目标公司</p>
                                    <p class="text-sm text-gray-700 mb-1">3. 可以增加一些具体的技术领域兴趣，如AI、Web开发等</p>
                                    <p class="text-sm text-gray-700 mb-1">4. 第二段可以增加团队合作的具体好处</p>
                                    <p class="text-sm text-gray-700">5. 结尾可以增加对未来职业影响的展望</p>
                                </div>
                            </div>
                            
                            <!-- 优秀表达 -->
                            <div class="border-l-4 border-success pl-4 py-2">
                                <div class="flex items-center gap-3 mb-2">
                                    <span class="w-6 h-6 rounded-full bg-success text-white flex items-center justify-center text-xs">
                                        <i class="fas fa-check"></i>
                                    </span>
                                    <span class="font-medium text-secondary">优秀表达 (8处)</span>
                                </div>
                                <div class="bg-green-50 p-3 rounded-lg">
                                    <p class="text-sm text-gray-700 mb-1">1. "This career path aligns perfectly with my skills and interests" - 表达准确</p>
                                    <p class="text-sm text-gray-700 mb-1">2. "Technology is always evolving" - 简洁有力</p>
                                    <p class="text-sm text-gray-700 mb-1">3. "To prepare for this career..." - 具体说明了准备措施</p>
                                    <p class="text-sm text-gray-700 mb-1">4. 文章结构清晰，段落分明</p>
                                    <p class="text-sm text-gray-700 mb-1">5. 词汇使用较为丰富多样</p>
                                    <p class="text-sm text-gray-700 mb-1">6. 职业规划具体明确</p>
                                    <p class="text-sm text-gray-700 mb-1">7. 开头直接点题，不拖沓</p>
                                    <p class="text-sm text-gray-700">8. 结尾有明确的职业目标</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 修改建议 -->
                    <div class="mt-8">
                        <h3 class="text-lg font-medium text-secondary mb-4">修改建议版本</h3>
                        
                        <div class="prose max-w-none border border-gray-200 rounded-lg p-6 bg-blue-50">
                            <h4 class="text-lg font-medium text-secondary mb-2">My Ideal Career</h4>
                            
                            <p class="text-gray-700 leading-relaxed mb-4">
                                My ideal job is to become a <span class="text-primary font-medium">software developer</span>. I am passionate about programming and problem-solving, especially in the fields of artificial intelligence and web development. In the future, I want to work for a leading technology company where I can contribute to innovative projects. This career path aligns perfectly with my skills and interests.
                            </p>
                            
                            <p class="text-gray-700 leading-relaxed mb-4">
                                I believe this career will allow me to continuously learn and grow. Technology is always evolving, and there are always new challenges to tackle. I enjoy <span class="text-primary font-medium">working</span> in team environments and collaborating with others to create solutions. Working in a team can help me learn new techniques and approaches from experienced colleagues, while also improving my communication and collaboration skills.
                            </p>
                            
                            <p class="text-gray-700 leading-relaxed mb-4">
                                Additionally, being a software developer offers good career prospects and opportunities for advancement. Many companies are looking for skilled developers, and the demand continues to grow. According to the U.S. Bureau of Labor Statistics, the employment of software developers is projected to grow 22 percent from 2020 to 2030, much faster than the average for all occupations.
                            </p>
                            
                            <p class="text-gray-700 leading-relaxed">
                                To prepare for this career, I am currently majoring in computer science and participating in various coding competitions. I also plan to do internships in renowned tech companies like Google and Microsoft to gain practical experience. My ultimate goal is to become a senior developer and lead my own team in creating impactful software products that can make people's lives easier and more enjoyable.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 内嵌的auth模块
        const authModule = (function() {
            // 用户数据存储键名
            const USER_STORAGE_KEY = 'moyu_user';
            
            // DOM元素ID常量
            const AUTH_SECTION_ID = 'auth-section';
            const LOGIN_BTN_CONTAINER_ID = 'login-btn-container';
            
            // 当前用户数据
            let currentUser = null;
            
            // 初始化函数 - 在所有页面加载时调用
            function initialize() {
                // 从本地存储加载用户数据
                loadUserData();
                
                // 更新UI
                updateAuthUI();
            }
            
            // 加载用户数据
            function loadUserData() {
                const userData = localStorage.getItem(USER_STORAGE_KEY);
                if (userData) {
                    currentUser = JSON.parse(userData);
                }
            }
            
            // 保存用户数据
            function saveUserData(user) {
                localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user));
                currentUser = user;
            }
            
            // 清除用户数据
            function clearUserData() {
                localStorage.removeItem(USER_STORAGE_KEY);
                currentUser = null;
            }
            
            // 处理登录
            function handleLogin(userData) {
                saveUserData(userData);
                updateAuthUI();
            }
            
            // 处理登出
            function handleLogout() {
                clearUserData();
                updateAuthUI();
            }
            
            // 检查登录状态
            function isLoggedIn() {
                return currentUser !== null;
            }
            
            // 获取当前用户
            function getCurrentUser() {
                return currentUser;
            }
            
            // 更新认证UI
            function updateAuthUI() {
                const authSection = document.getElementById(AUTH_SECTION_ID);
                const loginBtnContainer = document.getElementById(LOGIN_BTN_CONTAINER_ID);
                
                if (!loginBtnContainer) return;
                
                // 清除现有内容
                loginBtnContainer.innerHTML = '';
                
                if (isLoggedIn()) {
                    // 创建用户头像和下拉菜单
                    createUserDropdown(loginBtnContainer);
                } else {
                    // 创建登录按钮
                    createLoginButton(loginBtnContainer);
                }
            }
            
            // 创建登录按钮
            function createLoginButton(container) {
                const loginBtn = document.createElement('a');
                loginBtn.href = '墨语智学登录.html';
                loginBtn.className = 'flex items-center px-4 lg:px-6 py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors';
                loginBtn.innerHTML = '<span class="whitespace-nowrap font-medium text-sm lg:text-base">登录</span>';
                
                container.appendChild(loginBtn);
            }
            
            // 创建用户下拉菜单
            function createUserDropdown(container) {
                // 用户头像按钮
                const avatarBtn = document.createElement('div');
                avatarBtn.className = 'relative group';
                avatarBtn.id = 'user-dropdown';
                
                // 头像图片
                const avatarImg = document.createElement('img');
                avatarImg.src = currentUser.avatar || 'https://imgur.la/images/2025/06/07/94B2FFC12D41C799B69B2668BBA16BE7.jpg';
                avatarImg.alt = currentUser.name || '用户';
                avatarImg.className = 'w-8 h-8 rounded-full cursor-pointer object-cover';
                avatarImg.style.minWidth = '32px';
                
                // 下拉菜单
                const dropdownMenu = document.createElement('div');
                dropdownMenu.className = 'absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-50 origin-top-right transform transition-all duration-200 opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100';
                dropdownMenu.style.transformOrigin = 'top right';
                
                dropdownMenu.innerHTML = `
                    <div class="py-1" role="menu" aria-orientation="vertical">
                        <div class="px-4 py-2 border-b border-gray-100">
                            <p class="text-sm font-medium text-gray-900">${currentUser.name || '用户'}</p>
                            <p class="text-xs text-gray-500">${currentUser.username || ''}</p>
                        </div>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-user mr-2"></i>个人中心
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-cog mr-2"></i>设置
                        </a>
                        <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                        </a>
                    </div>
                `;
                
                avatarBtn.appendChild(avatarImg);
                avatarBtn.appendChild(dropdownMenu);
                container.appendChild(avatarBtn);
                
                // 添加登出按钮事件
                const logoutBtn = dropdownMenu.querySelector('#logout-btn');
                if (logoutBtn) {
                    logoutBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        handleLogout();
                    });
                }
                
                // 点击外部关闭菜单
                document.addEventListener('click', function(e) {
                    if (!avatarBtn.contains(e.target)) {
                        dropdownMenu.classList.remove('opacity-100', 'scale-100');
                        dropdownMenu.classList.add('opacity-0', 'scale-95');
                    }
                });
            }
            
            // 公共API
            return {
                initialize,
                handleLogin,
                handleLogout,
                isLoggedIn,
                getCurrentUser
            };
        })();

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            authModule.initialize();
            
            // 高亮文本点击事件
            document.querySelectorAll('.highlight-error, .highlight-suggestion, .highlight-excellent').forEach(el => {
                el.addEventListener('click', function() {
                    // 在实际应用中，这里可以显示更详细的批改信息
                    console.log('点击了批改标记:', this.textContent);
                });
            });
            
            // 侧边栏项目点击事件
            document.querySelectorAll('.sidebar-item').forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有active类
                    document.querySelectorAll('.sidebar-item').forEach(i => {
                        i.classList.remove('active');
                    });
                    
                    // 添加当前active类
                    this.classList.add('active');
                    
                    // 在实际应用中，这里可以筛选显示对应类型的批改
                    const type = this.querySelector('span:nth-child(2)').textContent;
                    console.log('选择了批改类型:', type);
                });
            });
            
            // 下载报告按钮事件
            document.querySelector('button:contains("下载批改报告")').addEventListener('click', function() {
                // 模拟下载报告
                alert('批改报告下载功能将在完整版中实现');
            });
        });
    </script>
</body>
</html>